<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>好味道</title>
  <link rel="icon" href="./../images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <!--element-ui的样式-->
  <link rel="stylesheet" href="../styles/vant.min.css"/>
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
  <style>
    .spans{
      margin-top: 10px;
    }
    .spans span{
      padding: 0 5px;
      display: inline-block;
      background: #9a6e3a;
      height: 25px;
      color: #2a2a2a;
      line-height: 25px;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
    }
    .search{
      display: flex;
      height: 50px;
      line-height:50px ;
      align-items: center;
      padding-left:5px ;
    }
    .search .pros{
      width: 100%;
    }
    .list{
      margin-top: 10px;
    }
    body{
      background: #fdfdfd;
    }
    .lists li{
      padding: 10px;
      height: 30px;
      background: #fff;
      border-top: 1px solid  #fdfdfd;
      line-height: 30px;
    }
    .lists li span{
      float: right;
      margin-right: 15px;
    }
    .pross{
      width: 100%;
    }
    .serchpro{
      padding: 0;
      height: 34px;
      width: 50px;
      font-size: 5px;
      text-align: center;
      margin-right:10px ;
    }
    .shop .box {
      position: relative;
      padding: 10px;
      height: 170px;
      background: #ffffff;
      border-radius: 10px;
    }
    .shop .box .imgs{
      float: left;
      width: 50px;
      height: 115px;
      border-radius: 10px;
      overflow: hidden;
    }
    .shop .box .text{
      float: left;
      margin-left: 10px;
    }

    .shop .box .text .spans{
      height: 15px;background:#c57b35;display: inline-block;padding: 0 3px;border-radius: 4px
    }
    .shop .box .text .youhui div{
      height: 15px;
      border: 1px #ee0a24 solid;
      display: inline-block;
      padding: 0 3px;
      border-radius: 4px;
      color:#de0404;
    }
    .shop .box .text .postion{
      position: absolute;
      right: 10px;
      top: 40px;
    }
    body{
      background: #f8f8f8;
    }
    .imss{
      width: 50px;
      height: 50px;
    }
    .text .xinxi{
      /*display: inline-block;*/
      font-size: 8px;
      display: flex;
    }
    .text .xinxi div{
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right:1px solid #5a5e66 ;
      padding: 0 10px;
    }
    .text .xinxi div:last-child{
      border-right: none;
    }
    .text .xinxi div:first-child{
      padding-left:0 ;
    }
    .text .title{
      display: inline-block;
      font-weight: 600;
      color:#f05907;
      font-size: 8px;
      background: #f2af8b;
      border-radius: 5px;
      padding: 0 3px;
    }
    .imglist{
      height: 50px;
      display: flex;
    }
    .imglist div{
      width: 60px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 8px;
      margin-top: 5px;
      margin-right: 10px;
    }
    .imglist div img{
      width: 60px;
      height: 50px;
      border-radius: 5px;
    }
    .text .youhui span{
      display: inline-block;
      border-radius: 5px;
      border: 1px solid #f2af8b;
      margin-right: 5px;
    }
    .text .youhui{
      margin-top: 5px;
    }
    .spans span{
      margin-right: 5px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
<div id="main">
  <div class="search">
    <span @click="iconbtn" class="el-icon-arrow-left"></span>
    <van-search
            class="pross"
            value=""
            placeholder="请输入搜索关键词"
            v-model="value"
    >
    </van-search>
    <van-button @click="sousuobtn(value)"  class="serchpro"  color="#7232dd" type="primary">搜索</van-button>
  </div>
  <div class="buttom">
    <div v-if="userbrand.length==0" class="jiemian">
      <div v-if="!value" class="box">
        <div class="all">
          <p style=" font-weight: 600;margin: 0;">历史搜索</p>
          <div class="spans" >
            <span @click="spanbtn(item)" v-for="(item,index) in JSON.parse(historySearch.data)" :key="index">{{item}}</span>
          </div>
        </div>
        <div class="tuijian">
          <p style=" font-weight: 600">好菜推荐</p>
          <ul>
            <li v-for="(item,index) in goodFood.data" :key="index">
              <van-card
                      :tag="(index+1).toString()"
                      :price="item.price/100"
                      :desc="item.description"
                      :title="item.name"
                      :thumb="'/common/download?name=' + item.image"
              >
              </van-card>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="list">
        <ul v-for="(item,index) in brand" :key="index" class="lists">
          <li @click="listbtn(item.name)">{{item.name}} <span>￥{{item.price/100}}</span></li>
        </ul>
      </div>
    </div>
    <div v-if="userbrand.length!=0&&index==true" @click="dianpubtn" class="dianpu">
      <div class="shop">
        <div class="box">
          <div class="imgs">
            <img class="imss" src="../images/logo.jpg">
          </div>
          <div class="text">
            <span class="postion">60分钟 <br> 1.8km</span>
            <p style="font-weight: 600;font-size: 15px;margin: 0">好味道(珠海店)</p>
            <div class="xinxi">
              <div>
                <span>月售</span>
                <span>100+</span>
              </div>
              <div>
                <span>起送</span>
                <span>￥15</span>
              </div>
              <div>
                <span>配送</span>
                <span>￥3.7</span>
              </div>
            </div>
            <p style="font-size:8px;margin-bottom: 5px;margin-top: 0"><span class="title">味道好极了</span></p>
            <p class="youhui" style="font-size:8px;margin: 0">
              <span>5元无门槛</span>
              <span>吃货红阿伯</span>
              <span>支持自取</span>
            </p>
            <div class="imglist">
              <div v-for="(item,index) in userbrand.data" :key="index">
                <img :src="'/common/download?name=' + item.image">
                <span>{{item.name}}</span>
                <span style="color: #ee0a24">￥{{item.price/100}}</span>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
    </div>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>

<script src="./../js/request.js"></script>

<script src="./../api/food.js"></script>

<script src="../js/jquery-2.1.0.js"></script>
<script>
  new Vue({
    el:'#main',
    data(){
      return {
        name:"", //点击菜品列表名字
        goodFood:{}, //好菜推荐
        historySearch:{},//历史搜索菜品
        item:false,//记录是否失去焦点
        index:false,//记录点击
        imageURL:"../images/img/null16293c9294000199.jpg",
        value:'',
        brand:[],//搜索菜品列表
        userbrand:[],//店铺记录信息
      }
    },
    computed:{
    },
    watch:{
      // 输入框搜索
      async value(newValue) {
        this.debounce(newValue)
      }
    },
    async created(){
      this.initData()
    },
    mounted(){},

    methods:{
      //节流函数
      debounce(newVlaue) {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(async () => {
          this.brand=await foodshopserch({name:newVlaue})
          this.brand = this.brand.data
          console.log("防抖成功！");
        }, 1000);
      },

      spanbtn(name){
        this.value=name;
        console.log(this.value)
      },
      // 初始化数据
      initData(){
        this.getList()
      },
      async getList(){
        this.goodFood=await foodGoods();
        this.historySearch=await foodHistory();
      },
      dianpubtn(){
        window.location.href="../index.html";
      },
      //获取焦点
      Focusbtn(){
        console.log("获取焦点")
        this.userbrand=[]
        this.item=false
        this.index=false
      },
      //失去焦点
      Blurbtn(){
        this.item=true
      },
      //点击搜索框
      async sousuobtn(name){
        this.userbrand=await foodSerchByName({name:name})
        this.index=true
      },
      //点击列表字段
      async listbtn(name){
        this.userbrand=await foodSerchByName({name:name})
        this.index=true
      },
      //返回界面
      iconbtn(){
        window.location.href="../indexpro.html";
      }
    },
  })
</script>
</body>
</html>